<!--典型案例/典型异常/菜单-->
<template>
    <div class="toolBarContainer">
        <el-card class="box-card">
            <el-button-group>
                <el-button type="primary" icon="el-icon-circle-plus">新建</el-button>
                <el-button type="primary" icon="el-icon-edit">修改</el-button>
                <el-button type="primary" icon="el-icon-delete">删除</el-button>
                <el-button type="primary" icon="el-icon-search">查看</el-button>
                <el-button type="primary" icon="el-icon-upload2">导入</el-button>
                <el-button type="primary" icon="el-icon-download">导出</el-button>
                <el-button type="primary" icon="el-icon-document">模板下载</el-button>
            </el-button-group>
            <div class="menu">
                <el-tag size="mini">保护类别:</el-tag>
                <el-select size="mini" v-model="bhlb" clearable placeholder="--请选择--">
                    <el-option
                        v-for="item in bhlbOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
                <el-tag size="mini">保护类别:</el-tag>
                <el-select size="mini" v-model="bhlb" clearable placeholder="--请选择--">
                    <el-option
                        v-for="item in bhlbOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
                <el-tag size="mini">保护类别:</el-tag>
                <el-select size="mini" v-model="bhlb" clearable placeholder="--请选择--">
                    <el-option
                        v-for="item in bhlbOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
                <el-tag size="mini">保护类别:</el-tag>
                <el-select size="mini" v-model="bhlb" clearable placeholder="--请选择--">
                    <el-option
                        v-for="item in bhlbOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
                <div class="btns">
                    <el-button   type="primary" icon="el-icon-search">查询</el-button>
                    <el-button   type="primary" icon="el-icon-refresh">重置</el-button>
                </div>
            </div>
        </el-card >
    </div>
</template>

<script>
    export default {
        name: 'toolBar',
        data() {
            return {
                dialogTableVisible: false,
                bhlb:'',
                bhlbOptions: [
                    { value: '选项1', label: '黄金糕' },
                    { value: '选项2', label: '双皮奶' },
                    { value: '选项3', label: '蚵仔煎' },
                    { value: '选项4', label: '龙须面' }
                ],
                value: '',
                gridData: [{
                    date: '2016-05-02',
                    name: 'John Smith',
                    address: 'No.1518,  Jinshajiang Road, Putuo District'
                }, {
                    date: '2016-05-04',
                    name: 'John Smith',
                    address: 'No.1518,  Jinshajiang Road, Putuo District'
                }, {
                    date: '2016-05-01',
                    name: 'John Smith',
                    address: 'No.1518,  Jinshajiang Road, Putuo District'
                }, {
                    date: '2016-05-03',
                    name: 'John Smith',
                    address: 'No.1518,  Jinshajiang Road, Putuo District'
                }]
            }
        },
        methods: {
            // v-el-drag-dialog onDrag callback function
            handleDrag() {
                this.$refs.select.blur()
            }
        }
    }
</script>

<style>
    .toolBarContainer .el-card .el-card__body{
        padding: 5px;
    }
    .toolBarContainer .el-button{
        background-color: #fff ;
        border-color:#fff ;
        color: rgb(67,74,80)
    }
    .toolBarContainer .el-tag{
        background-color: #324157 ;
        border-color:rgb(67,74,80) ;
        color: #fff;
        height: 28px;
        line-height: 28px;
    }
    .toolBarContainer .el-button:hover{
        background-color: rgb(67,74,80) ;
        color: #fff;
        border-color:rgb(67,74,80) ;
    }
</style>
<style scoped>
    .menu{
        margin-top: 5px;
    }
    .btns{
        float: right;
        margin-right: 5px;
    }
    .btns .el-button{
        box-shadow: 1px 1px 1px 1px #888888;
    }

</style>
